<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>commodity</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.1.1.min.js"></script>
    <script src="lib/jquery.lazyload.js?v=1.9.1"></script>
    <script src="lib/vue.js"></script>
    <script src="app/index.js"></script>
    </head>
<body>
<div id="app">
        <div class="commodity-box">
            <div class="commodity-choose clearfix">
                <a href="index.html" class="iconfont">&#xe68a;</a>
                <a href="javascript:void(0);" class="iconfont">&#xe732;</a>
                <a href="search_commodity.html" class="iconfont">&#xe679;</a>
            </div>
                <img :src="imgData" alt="">
    </div>
<ul class="collect-box">
    <li><a href="javascript:void(0);" class="clearfix" id="collect"><img src="img/commodity_collect.png" alt="">收藏<span>766</span></a></li>
    <li><a href="javascript:void(0);" class="clearfix" id="share"><img src="img/commodity_share.png" alt="">分享</a></li>
</ul>

<div class="commodity-describe clearfix">
    <h2><span></span>{{commodityName}}</h2>
    <p>{{shortDescription}}</p>
    <span>¥{{commodityPrice}}.00</span>
</div>

<div class="search-keywords">
    <h3>搜索关键字</h3>
    <ul>
        <li><a href="javascript:void(0);">{{commodityKeywords}}</a></li>
    </ul>
</div>
<div class="commodity-show">
    <h1>产品展示</h1>
    <div class="showImg" id="container">
    </div>
    <hr>
    <div class="clearfix imm-buy"><a :href="toShopList" class="clearfix"><img src="img/commodity_shop.png" alt=""></a><span>{{shopNum}}</span><a :href="payHref" class="buy-btn">即刻购买</a><a href="javascript:void(0);"  class="buy-btn" @click="addShop()">加入购物车</a></div>
</div>
<div class="share-box">
    <div class="share">
        <p>分享到</p>
        <ul class="clearfix">
            <li><a href="javascript:void(0);" class="iconfont">&#xe905;</a></li>
            <li><a href="javascript:void(0);" class="iconfont">&#xe906;</a></li>
            <li><a href="javascript:void(0);" class="iconfont">&#xe904;</a></li>
        </ul>
        <button id="shareCancle">取消</button>
    </div>
</div>
</div>
</body>
</html>
<script>
    var commonUrl = 'http://172.30.31.254:8080/youhuishop/';
    var vm;
    var id = location.search.split("=")[1];
    $.ajax({
        url:commonUrl + 'api/goods/detail',
        type:'GET',
        dataType:'json',
        data:{
            id:id
        },
        success:function (data) {
            console.log(data);
            var desArr = data.data.description.split('url="');
            var len = desArr.length;
            for(var i =1;i<len;i++){
                $('.showImg').append("<img class='lazy' data-original='"+desArr[i].split(" ")[0]+"'>")
            }
            $(function () {
                $(".showImg>.lazy").lazyload({
                    placeholder : "img/loadimg.gif", //用图片提前占位
                    effect: "fadeIn" // 载入使用何种效果
                });
            })
            vm = new Vue({
                el:'#app',
                data:{
                    imgData:data.data.img,
                    commodityName:data.data.name,
                    shortDescription:data.data.shortDescription,
                    commodityPrice:data.data.salePrice,
                    commodityKeywords:data.data.keyword,
                    payHref:'pay.html?id='+id,
                    shopNum:0,
                    toShopList:'shopCar.html'
                },
                methods:{
                    addShop:function () {
                        vm.shopNum += 1;
                        vm.toShopList += '?id='+ id
                    }
                }
            })
        }
    })
</script>